<template>
    <div>
        <div v-for="item in data.subMenuList">
            <el-submenu :index="item.index"  v-if="hasSub(item)" :class="activeIndex === item.index?'activeLine':''">
                <template slot="title" class="ft14p">
                    <img :src="item.src"  v-if="item['src']" class="nav-img" alt=""/>
                    <span  class="ft16p ml5">{{item.title}}</span>
                </template>
                <nav-cpt :data="item" :activeIndex="activeIndex"></nav-cpt>
            </el-submenu>
            <el-menu-item :index="item.index"  v-else-if="!hasSub(item)" class="ft14p" :class="activeIndex === item.index?'activeLine':''">
                <img :src="item.src"  v-if="item['src']" class="nav-img" alt=""/>
                <span  class="ft16p ml5">{{item.title}}</span>
            </el-menu-item>
        </div>
    </div>
</template>

<script>
    export default {
        name:'nav-cpt',
        props:[
            'data',
            'activeIndex'
        ],
        data(){
            return{

            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            hasSub(item){
                if(item['subMenuList'] !=undefined && item['subMenuList']  !=''){
                    return true;
                }else{
                    return false;
                }

            }

        },
    }
</script>

<style scoped>


</style>